<template>
    <div>
        <div class="about">
            <h1>我是About page</h1>
        </div>
        <button @click="addNum">让About加一</button>
        <h1>vuex-demo</h1>
        count: {{ $store.state.count }} <br>
        msg: {{ $store.state.msg }} <br>
        <!-- {{count}} 数组格式 -->
        msg: {{num}} 

        <h2>Getters</h2>
        reverseMsg: {{ $store.getters.reverseMsg }}<br>
        reverseMsg: {{ reverseMsg }}

        <h2>Mutations</h2>
        <button @click="$store.commit('increate', 2)"> Mutations</button>
        <button @click="increate(3)"> Mutations</button>
        
        <h2>Actions</h2>
        <button @click="$store.dispatch('increateAsync', 5)">Action</button>
        <button @click="increateAsync(5)">Action</button>

        <h2>Module</h2>
        products: {{ $store.state.products.products }} <br>
        products: {{ products }} <br>
        <button @click="$store.commit('products/setProducts', [])">Muation</button>
        <button @click="setProducts([])">Muation</button>
    </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
import bus from '@/assets/js/eventBus'

export default {
    computed: {
        // ...mapState(['count', 'msg'])
        ...mapState({
            num: 'count',
            message: 'msg'
        }),
        ...mapState('products', ['products']),
        ...mapGetters(['reverseMsg']) // 也可以对象格式
    },
    methods: {
        ...mapMutations(['increate']), // 也可以对象格式
        ...mapActions(['increateAsync']),
        ...mapMutations('products', ['setProducts']),
        addNum() {
            bus.$emit('AboutEvent',1)
        }
    }
}
</script>

<style lang="less" scoped>

</style>